<template>
  <div class="cockpit">
    <div class="cockpit-head">
      <img src="/images/screen/top.svg" width="100%" height="80px">
      <div>经营驾驶舱</div>
    </div>
    <div class="cockpit-body">
      <!-- 第一列 -->
      <div class="column first-column">
        <div class="section">
          <div class="section-head">
            <div class="section-title">
              <img src="/images/screen/arrow.svg">
              <span>合同订单-结算情况</span>
            </div>
          </div>
          <div class="section-body">
            <div class="stat-item active" @click="sub_js_event('yjs')">
              <div class="stat-icon">
                <img src="/images/screen/stat-y.svg" width="60" height="60" alt="已结算">
              </div>
              <div class="stat-content">
                <div class="stat-value">{{res_js.total_js}}</div>
                <div class="stat-label">已结算（万元）</div>
              </div>
            </div>
            <div class="stat-item" @click="sub_js_event('wjs')">
              <div class="stat-icon">
                <img src="/images/screen/stat-n.svg" width="60" height="60" alt="未结算">
              </div>
              <div class="stat-content">
                <div class="stat-value">{{res_js.total_wjs}}</div>
                <div class="stat-label">未结算（万元）</div>
              </div>
            </div>
          </div>
        </div>
        <div class="section">
          <div class="section-head">
            <div class="section-title">
              <img src="/images/screen/arrow.svg">
              <span>项目承揽数量</span>
            </div>
          </div>
          <div class="section-body">
            <div class="chart-container">
              <div class="pie-chart" style="width: 95%; height: 95%; margin-left: 10px;" ref="pjCountChart"></div>
            </div>
          </div>
        </div>
        <div class="section">
          <div class="section-head">
            <div class="section-title">
              <img src="/images/screen/arrow.svg">
              <span>异常预警</span>
            </div>
          </div>
          <div class="section-body">
            <div class="warning-charts">
              <div class="warning-chart">
                <div class="pie-chart" ref="projectWarningChart"></div>
              </div>
              <div class="warning-chart">
                <div class="pie-chart" ref="assignWarningChart"></div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 第二列 -->
      <div class="column second-column">
        <div class="section-mid">
          <div class="mid-top">
            <div class="title">收入统计</div>
            <div class="circle circle1" @click="sub_income_event('ht')">
              <img src="/images/screen/mid-02.svg">
              <div class="income">
                <div class="income-value">{{res_in_cost.total_ht_income}}</div>
                <div class="income-label">合同收入(万元)</div>
              </div>
            </div>
            <div class="circle circle2" @click="sub_income_event('js')">
              <img src="/images/screen/mid-02.svg">
              <div class="income">
                <div class="income-value">{{res_in_cost.total_js_income}}</div>
                <div class="income-label">结算收入(万元)</div>
              </div>
            </div>
          </div>
          <div class="mid-bottom">
            <div class="title">成本支出</div>
            <div class="block item1" @click="sub_cost_event('项目成本')">
              <img src="/images/screen/mid-03.svg">
              <div class="cost">
                <div class="cost-value">{{res_in_cost.pj_cost}}</div>
                <div class="cost-label">项目成本(元)</div>
              </div>
            </div>
            <div class="block item2" @click="sub_cost_event('人工成本')">
              <img src="/images/screen/mid-03.svg">
              <div class="cost">
                <div class="cost-value">{{res_in_cost.labor_cost}}</div>
                <div class="cost-label">人工成本(元)</div>
              </div>
            </div>
            <div class="block item3" @click="sub_cost_event('外委')">
              <img src="/images/screen/mid-03.svg">
              <div class="cost">
                <div class="cost-value">{{res_in_cost.outsource_cost}}</div>
                <div class="cost-label">外委(元)</div>
              </div>
            </div>
          </div>
        </div>
        <div class="section">
          <div class="section-head">
            <div class="section-title">
              <img src="/images/screen/arrow.svg">
              <span>经营月表</span>
            </div>
          </div>
          <div class="section-body">
            <div class="chart-container">
              <div class="pie-chart" ref="trendChart"></div>
            </div>
          </div>
        </div>
      </div>

      <!-- 第三列 -->
      <div class="column third-column">
        <div class="section-pj">
          <div class="section-head">
            <div class="section-title">
              <img src="/images/screen/arrow.svg">
              <span>项目阶段</span>
            </div>
          </div>
          <div class="section-body-pj">
            <div class="pj-stage">
              <div class="stage-content">
                <div class="stage-icon">
                  <img src="/images/screen/pj-stage-10.svg" alt="进度80%-100%">
                </div>
                <div class="stage-info">
                  <div class="progress-text">进度80%-100%项目数量</div>
                  <div class="progress-count">{{res_pj_stage.stage_100}}个</div>
                  <div class="progress-detail" @click="sub_pj_stage_event('80-100')">查看详情</div>
                </div>
              </div>
            </div>
            <div class="pj-stage">
              <div class="stage-content">
                <div class="stage-icon">
                  <img src="/images/screen/pj-stage-08.svg" alt="进度60%-80%">
                </div>
                <div class="stage-info">
                  <div class="progress-text">进度60%-80%项目数量</div>
                  <div class="progress-count">{{res_pj_stage.stage_80}}个</div>
                  <div class="progress-detail" @click="sub_pj_stage_event('60-80')">查看详情</div>
                </div>
              </div>
            </div>
            <div class="pj-stage">
              <div class="stage-content">
                <div class="stage-icon">
                  <img src="/images/screen/pj-stage-06.svg" alt="进度40%-60%">
                </div>
                <div class="stage-info">
                  <div class="progress-text">进度40%-60%项目数量</div>
                  <div class="progress-count">{{res_pj_stage.stage_60}}个</div>
                  <div class="progress-detail" @click="sub_pj_stage_event('40-60')">查看详情</div>
                </div>
              </div>
            </div>
            <div class="pj-stage">
              <div class="stage-content">
                <div class="stage-icon">
                  <img src="/images/screen/pj-stage-04.svg" alt="进度20%-40%">
                </div>
                <div class="stage-info">
                  <div class="progress-text">进度20%-40%项目数量</div>
                  <div class="progress-count">{{res_pj_stage.stage_40}}个</div>
                  <div class="progress-detail" @click="sub_pj_stage_event('20-40')">查看详情</div>
                </div>
              </div>
            </div>
            <div class="pj-stage">
              <div class="stage-content">
                <div class="stage-icon">
                  <img src="/images/screen/pj-stage-02.svg" alt="进度0%-20%">
                </div>
                <div class="stage-info">
                  <div class="progress-text">进度0%-20%项目数量</div>
                  <div class="progress-count">{{res_pj_stage.stage_20}}个</div>
                  <div class="progress-detail" @click="sub_pj_stage_event('0-20')">查看详情</div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="section">
          <div class="section-head">
            <div class="section-title">
              <img src="/images/screen/arrow.svg">
              <span>人员情况</span>
            </div>
          </div>
          <div class="section-body">
            <div class="chart-container">
              <div class="pie-chart" ref="personChart"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Dashboard',
  data() {
    return {
      res_js: {
        total_js: 0,
        total_wjs: 0
      },
      res_in_cost: {
        total_ht_income: 0,
        total_js_income: 0,
        pj_cost: 0,
        labor_cost: 0,
        outsource_cost: 0
      },
      res_month_info: [],
      res_pj_stage: {
        stage_20: 0,
        stage_40: 0,
        stage_60: 0,
        stage_80: 0,
        stage_100: 0
      },
      //项目承揽数量配置
      pjCountOption: {
        tooltip: {
          trigger: 'axis',
          formatter: '{b}: {c}个',
          axisPointer: {
            type: 'shadow'
          },
          textStyle: {
            fontSize: 10,
            color: '#7c8c9b'
          }
        },
        legend: {
          data: ['承揽数量'],
          top: 5,
          textStyle: {
            fontSize: '1.1em',
            color: '#7c8c9b'
          }
        },
        grid: {
          left: '1%',
          right: '1%',
          top: '40px',
          bottom: '1px',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            axisPointer: {
              type: 'shadow'
            },
            axisTick: {
              alignWithLabel: true
            },
            axisLabel: {
              interval: 1,
              rotate: 0
            },
            textStyle: {
              fontSize: '0.8em',
              color: '#7c8c9b'
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '承揽数量',
            type: 'bar',
            barWidth: '10',
            data: [],
            itemStyle: {
              color: '#5B8FF9'
            }
          }
        ]
      },
      // 项目异常占比配置
      projectWarningOption: {
        title: {
          text: '项目预警',
          left: '30%',
          top: '5%',
          textStyle: {
            fontSize: 12,
            color: '#294777'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c}个',
          textStyle: {
            fontSize: 10,
            color: '#7c8c9b'
          }
        },
        legend: {
          show: false
        },
        series: [{
          type: 'pie',
          label: {
            show: true,
            position: 'inside',
            formatter: ['{b|{b}}', '{d|{d}%}'].join('\n'),
            rich: {
              b: {fontSize: 11, lineHeight: 15, color: '#ffffff'},
              d: {fontSize: 11, lineHeight: 15, color: '#ffffff'}
            },
            fontSize: 12,
            color: '#ffffff'
          },
          data: []
        }]
      },
      // 指派异常占比配置
      assignWarningOption: {
        title: {
          text: '指派预警',
          left: '30%',
          top: '5%',
          textStyle: {
            fontSize: 12,
            color: '#294777'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c}个',
          textStyle: {
            fontSize: 10,
            color: '#7c8c9b'
          }
        },
        legend: {
          show: false
        },
        series: [{
          type: 'pie',
          label: {
            show: true,
            position: 'inside',
            formatter: ['{b|{b}}', '{d|{d}%}'].join('\n'),
            rich: {
              b: {fontSize: 11, lineHeight: 15, color: '#ffffff'},
              d: {fontSize: 11, lineHeight: 15, color: '#ffffff'}
            },
            fontSize: 12,
            color: '#ffffff'
          },
          data: []
        }]
      },
      //经营月表配置
      trendOption: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        legend: {
          data: ['净利润', '同比增长'],
          top: 5,
          textStyle: {
            fontSize: '1.1em',
            color: '#7c8c9b'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          top: '40px',
          bottom: '10px',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            axisPointer: {
              type: 'shadow'
            },
            axisTick: {
              alignWithLabel: true
            },
            axisLabel: {
              interval: 0,
              rotate: 0
            },
            textStyle: {
              fontSize: '0.8em',
              color: '#7c8c9b'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '净利润',
            min: 0,
            axisLabel: {
              formatter: '{value} 万'
            }
          },
          {
            type: 'value',
            name: '增长率',
            axisLabel: {
              formatter: '{value} %'
            }
          }
        ],
        series: [
          {
            name: '净利润',
            type: 'bar',
            barWidth: '15',
            data: [],
            itemStyle: {
              color: '#5B8FF9'
            }
          },
          {
            name: '同比增长',
            type: 'line',
            yAxisIndex: 1,
            smooth: true,
            data: [],
            itemStyle: {
              color: '#5AD8A6'
            }
          }
        ]
      },
      //人员情况配置
      personOption: {
        title: {
          text: '状态',
          left: '30%',
          top: 'center',
          textStyle: {
            fontSize: 15,
            fontWeight: 'bold'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c}个'
        },
        legend: {
          orient: 'vertical',
          right: '10%',
          top: 'middle',
          textStyle: {
            fontSize: '1.1em',
            color: '#7c8c9b'
          }
        },
        series: [{
          type: 'pie',
          radius: ['50%', '70%'],
          center: ['37%', '50%'],
          avoidLabelOverlap: false,
          padAngle: 5,
          itemStyle: {
            borderRadius: 5
          },
          data: [],
          label: {
            normal: {
              show: true,
              position: 'outside', // 标签显示在扇形区域的外部
              formatter: '{d}%', // 显示名称和百分比
              fontSize: '1.2em',
              color: '#7c8c9b' // 标签字体颜色
            }
          },
          labelLine: {
            normal: {
              show: true,
              length: 5, // 引导线的长度
              length2: 5,
              length3: 5,
            }
          }
        }]
      },
      // 添加预定义的颜色数组
      chartColors: [
        '#5B8FF9', // 蓝色
        '#5AD8A6', // 绿色
        '#F6BD16', // 黄色
        '#E8684A', // 红色
        '#6DC8EC', // 浅蓝
        '#9270CA', // 紫色
        '#FF9D4D', // 橙色
        '#269A99', // 青色
        '#FF99C3', // 粉色
        '#A9ABB1'  // 灰色
      ],
    }
  },
  created() {

  },
  mounted() {
    this.initPjCountChart();
    this.initProjectWarningChart();
    this.initAssignWarningChart();
    this.initTrendChart();
    this.initPersonChart();
    this.$nextTick(() => {
      this.getSettlementData(); //查询结算数据
      this.getInCostData(); //查询收入统计/成本支出
      this.getPjStageData() //查询项目阶段
      
      this.getPjCountData(); //查询项目承揽数量
      this.getWarningData(); //查询异常预警
      this.getBizTrendData(); //查询经营趋势
      this.getPersonData(); //查询人员情况
    })
  },
  methods: {
    async getSettlementData() {
      let res_js = await elm.post("/business/analysis/cockpit/GetSettlementData", {now_year: new Date().getFullYear()});
      this.res_js = res_js;
    },
    async getPjCountData() {
      let res_pj_count = await elm.post("/business/analysis/cockpit/GetPjCountData", {now_year: new Date().getFullYear()});
      let projectCounts = [];
      projectCounts = res_pj_count.map(item => item.pj_count);
      this.pjCountOption.series[0].data = projectCounts;
      this.initPjCountChart();
    },
    async getInCostData() {
      let res_in_cost = await elm.post("/business/analysis/cockpit/GetInCostData", {now_year: new Date().getFullYear()});
      this.res_in_cost = res_in_cost;
    },
    async getWarningData() {
      let res_warning = await elm.post("/business/analysis/cockpit/GetWarningData", {now_year: new Date().getFullYear()});
      let pj_num = res_warning.pj_list.length;
      const pj_counts = res_warning.pj_list.reduce((acc, item) => {
        if (item.delay_days > 0) {
          acc.pj_warn_num += 1;
        }
        return acc;
      }, { pj_warn_num: 0});
      
      let zp_num = res_warning.zp_list.length;
      const zp_counts = res_warning.zp_list.reduce((acc, item) => {
        if (item.delay_days > 0) {
          acc.zp_warn_num += 1;
        }
        return acc;
      }, { zp_warn_num: 0});
      
      let pj_data = [];
      pj_data.push({
        value: pj_counts.pj_warn_num,
        name: '异常',
        itemStyle: { color: '#feab3e' }
      })
      pj_data.push({
        value: pj_num - pj_counts.pj_warn_num,
        name: '正常',
        itemStyle: { color: '#5B8FF9' }
      })
      this.projectWarningOption.series[0].data = pj_data;
      
      let zp_data = [];
      zp_data.push({
        value: zp_counts.zp_warn_num,
        name: '异常',
        itemStyle: { color: '#feab3e' }
      })
      zp_data.push({
        value: zp_num - zp_counts.zp_warn_num,
        name: '正常',
        itemStyle: { color: '#5B8FF9' }
      })
      this.projectWarningOption.series[0].data = pj_data;
      this.assignWarningOption.series[0].data = zp_data;
      
      this.initProjectWarningChart();
      this.initAssignWarningChart();
    },
    async getBizTrendData() {
      let res_month = await elm.post("/business/analysis/cockpit/GetBizTrendData", {now_year: new Date().getFullYear()});
      this.res_month_info = res_month.info;
      const netProfitData = [];
      const growthRateData = [];
      if (res_month.list) {
        res_month.list.forEach(item => {
          netProfitData.push(item.net_profit_now_year); // 净利润
          growthRateData.push(item.growth_rate); // 同比增长率
        });
      }
     
      // 更新图表配置
      this.trendOption.series[0].data = netProfitData; // 更新净利润数据
      this.trendOption.series[1].data = growthRateData;
      this.initTrendChart();
    },
    async getPjStageData() {
      let res_pj_stage = await elm.post("/business/analysis/cockpit/GetPjStageData", {now_year: new Date().getFullYear()});
      this.res_pj_stage = res_pj_stage;
    },
    async getPersonData() {
      let res_ei = await elm.post("/business/analysis/cockpit/GetEIConData", {});
      let data = [];
      data.push({
        value: res_ei.work_count,
        name: '在岗',
        itemStyle: {
          color: this.chartColors[0 % this.chartColors.length]
        }
      })
      data.push({
        value: res_ei.trip_count,
        name: '出差',
        itemStyle: {
          color: this.chartColors[1 % this.chartColors.length]
        }
      })
      data.push({
        value: res_ei.leave_count,
        name: '请假',
        itemStyle: {
          color: this.chartColors[2 % this.chartColors.length]
        }
      })
      this.personOption.series[0].data = data;
      this.initPersonChart();
    },
    initPjCountChart() {
      this.$nextTick(() => {
        if (this.$refs.pjCountChart) {
          const chart = this.$echarts.init(this.$refs.pjCountChart);
          chart.setOption(this.pjCountOption);
          chart.off('click').on('click', function(params) {
            //构造查询日期参数
            let month = params.name; // 已知月份
            let currentYear = new Date().getFullYear();
            let monthIndex = parseInt(month.replace('月', '')) - 1;
            let date_param = new Date(currentYear, monthIndex);
            let now_year = elm.parseTime(date_param, '{y}-{m}');
            elm.dialog.open(this, '/business/analysis/sub_pj_num', '项目承揽情况【'+params.name+'】', '80%', '80%', {now_year: now_year}, false);
          })
          // 监听窗口大小变化，重绘图表
          window.addEventListener('resize', () => {
            chart.resize();
          })
        }
      })
    },
    initProjectWarningChart() {
      this.$nextTick(() => {
        if (this.$refs.projectWarningChart) {
          const chart = this.$echarts.init(this.$refs.projectWarningChart);
          chart.setOption(this.projectWarningOption);
          chart.off('click').on('click', function(params) {
            elm.dialog.open(this, '/business/analysis/sub_pj_waring', '项目预警【'+params.name+'】', '80%', '80%', {state: params.name}, false);
          });
          window.addEventListener('resize', () => {
            chart.resize();
          });
        }
      });
    },
    initAssignWarningChart() {
      this.$nextTick(() => {
        if (this.$refs.assignWarningChart) {
          const chart = this.$echarts.init(this.$refs.assignWarningChart);
          chart.setOption(this.assignWarningOption);
          chart.off('click').on('click', function(params) {
            elm.dialog.open(this, '/business/analysis/sub_zp_waring', '指派预警【'+params.name+'】', '80%', '80%', {state: params.name}, false);
          });
          window.addEventListener('resize', () => {
            chart.resize();
          });
        }
      });
    },
    initTrendChart() {
      this.$nextTick(() => {
        if (this.$refs.trendChart) {
          const chart = this.$echarts.init(this.$refs.trendChart);
          chart.setOption(this.trendOption);
          chart.off('click').on('click', (params) => {
            this.res_month_info.forEach(item => {
              if (item.month === params.name) {
                elm.dialog.open(this, '/business/analysis/sub_trend', '经营月表详情【'+params.name+'】', '80%', '80%', {info: item}, false);
              }
            })
            // elm.dialog.open(this, '/business/analysis/sub_trend', '经营月表', '70%', '80%', {now_year: now_year}, false);
          });
          // 监听窗口大小变化，重绘图表
          window.addEventListener('resize', () => {
            chart.resize();
          })
        }
      })
    },
    initPersonChart() {
      this.$nextTick(() => {
        if (this.$refs.personChart) {
          const chart = this.$echarts.init(this.$refs.personChart);
          chart.setOption(this.personOption);
          chart.off('click').on('click', function(params) {
            // 控制台打印数据的名称
            // console.log(params.name);
            // elm.dialog.open(_parent, this.url, this.title, this.width, this.height, this.data, this.full);
            elm.dialog.open(this, '/business/analysis/sub_person', '人员情况【'+params.name+'】', '80%', '80%', {state: params.name}, false);
          });
          // 监听窗口大小变化，重绘图表
          window.addEventListener('resize', () => {
            chart.resize();
          })
        }
      })
    },
    // 合同订单-结算事件
    sub_js_event(e) {
      if (e === 'yjs') { //已结算
        elm.dialog.open(this, '/business/analysis/sub_js', '结算情况【已结算】', '80%', '80%', {flag: 'part'}, false);
      } else { //未结算
        elm.dialog.open(this, '/business/analysis/sub_wjs', '结算情况【未结算】', '80%', '80%', {}, false);
      }
    },
    //成本支出
    sub_cost_event(e) {
      if (e === '项目成本') {
        elm.dialog.open(this, '/business/analysis/sub_pj_cost', '成本支出【项目成本】', '80%', '80%', {}, false);
      } else if (e === '人工成本') {
        elm.dialog.open(this, '/business/analysis/sub_labor_cost', '成本支出【人工成本】', '80%', '80%', {}, false);
      } else{
        elm.dialog.open(this, '/business/analysis/sub_outsource_cost', '成本支出【外委】', '80%', '80%', {}, false);
      }
    },
    //收入统计
    sub_income_event(e) {
      if (e === 'ht') {
        elm.dialog.open(this, '/business/analysis/sub_ht_income', '收入统计【合同收入】', '80%', '80%', {}, false);
      } else {
        elm.dialog.open(this, '/business/analysis/sub_js', '收入统计【结算收入】', '80%', '80%', {flag: 'all'}, false);
      }
    },
    // 项目阶段事件
    sub_pj_stage_event(e) {
      elm.dialog.open(this, '/business/analysis/sub_pj_stage', '项目阶段', '80%', '80%', {progress: e}, false);
    }
  }
}
</script>

<style scoped>
.cockpit {
  background-image: url('/images/screen/bg.png');
  background-repeat: no-repeat;
  min-height: 100vh;
  background-size: cover;
  font-size: 14px;
}

.cockpit-head {
  width: 100%;
  height: 100px;
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  position: relative;
}

.cockpit-head img {
  position: absolute;
  top: 0;
  left: 0;
}

.cockpit-head div {
  z-index: 1;
  color: #294777;
  font-size: 28px;
  font-weight: bold;
  letter-spacing: 5px;
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.cockpit-body {
  display: flex;
  justify-content: space-between; /* 三列之间的间距均匀分布 */
  gap: 20px; /* 增加列间距 */
  padding: 0 20px; /* 增加两侧内边距 */
}

.column {
  display: flex;
  flex-direction: column; /* 每列内容垂直排列 */
  gap: 20px; /* 每列内部内容的间距 */
}

.first-column {
  flex: 1;
}

.third-column {
  flex: 1; /* 第一列和第三列占据相同宽度 */
}

.second-column {
  flex: 2; /* 第二列宽度是第一列宽度的两倍 */
}

.section {
  min-height: 200px;
}

.section-head {
  display: flex;
  width: 100%;
  height: 30px;
  background: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.1));
  border: 1px solid #2045c3;
  border-image: linear-gradient(to right, rgba(32, 69, 195, 1), rgba(32, 69, 195, 0.1));
  border-image-slice: 1;
  border-radius: 5px;
}

.section-title {
  display: flex;
  font-size: 0.9em;
  font-weight: bold;
  color: #294777;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  gap: 10px;
}

.section-title img {
  width: 18px;
  height: 18px;
  margin-left: 20px;
}

.section-body {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 200px;
  background: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.1));
  border: 1px solid #2045c3;
  border-image: linear-gradient(to top, rgba(32, 69, 195, 1), rgba(32, 69, 195, 0.1));
  border-image-slice: 1;
}

.stat-item {
  display: flex;
  align-items: center;
  justify-content: space-between; /* 让子元素分布在两端 */
  height: 70px;
  border-radius: 2px;
  margin: 20px 20px 0;
  cursor: pointer;
}

.stat-item.active {
  background-image: url('/images/screen/stat-item-active.svg');
}

.stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 20px;
}

.stat-content {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-right: 20px;
}

.stat-value {
  font-size: 20px;
  font-weight: bold;
  color: #294777;
}

.stat-label {
  font-size: 12px;
  color: #7c8c9b;
}

.section-pj {
  min-height: 450px;
}

.section-body-pj {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 425px;
  background: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.1));
  border: 1px solid #2045c3;
  border-image: linear-gradient(to top, rgba(32, 69, 195, 1), rgba(32, 69, 195, 0.1));
  border-image-slice: 1;
  padding: 15px 0;
}

.pj-stage {
  margin: 8px 20px;
  border-radius: 4px;
  background-image: url('/images/screen/stat-item-active.svg');
  position: relative;
}

.stage-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stage-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 5px;
  height: 35px;
  width: 100%;
}

.stage-icon img {
  width: 100%;
  height: 30px;
}

.stage-info {
  width: 100%;
  height: 20px;
  padding: 4px 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.progress-text {
  color: #7c8c9b;
  font-size: 0.8em;
}

.progress-count {
  color: #333;
  font-size: 0.8em;
  font-weight: 500;
}

.progress-detail {
  color: #409EFF;
  font-size: 0.8em;
  cursor: pointer;
}

.section-mid {
  min-height: 489px;
  background-image: url('/images/screen/mid-01.svg');
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
}

.mid-top {
  width: 680px;
  height: 200px;
  position: absolute;
  top: 22%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.mid-top .title {
  border: 1px solid #7c8c9b;
  border-radius: 20px;
  background-color: white;
  width: 98px;
  height: 22px;
  font-size: 15px;
  color: #294777;
  font-weight: bold;
  letter-spacing: 3px;
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
}

.mid-top .circle {
  position: absolute;
  transform: translateX(-50%);
  width: 130px;
  height: 130px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.circle.circle1 {
  top: 30%;
  left: 35%;
}
.circle.circle2 {
  top: 30%;
  left: 65%;
}

.circle img {
  width: 130px;
  height: 100%;
}

.income {
  width: 120px;
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #294777;
}

.income .income-value {
  font-size: 1.4em;
  font-weight: bold;
}

.income .income-label {
  font-size: 0.8em;
}

.mid-bottom {
  width: 680px;
  height: 200px;
  position: absolute;
  top: 75%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.mid-bottom .title {
  border: 1px solid #7c8c9b;
  border-radius: 20px;
  background-color: white;
  width: 98px;
  height: 22px;
  font-size: 15px;
  color: #294777;
  font-weight: bold;
  letter-spacing: 3px;
  position: absolute;
  left: 50%;
  top: 20%;
  transform: translate(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
}

.mid-bottom .block {
  position: absolute;
  transform: translateX(-50%);
  width: 120px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.block.item1 {
  top: 15%;
  left: 15%;
}

.block.item2 {
  top: 40%;
  left: 50%;
}

.block.item3 {
  top: 15%;
  left: 85%;
}

.block.item1 img,
.block.item2 img,
.block.item3 img {
  width: 120px;
  height: 100%;
}

.cost {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #294777;
  width: 100px;
}

.cost .cost-value {
  font-size: 1.4em;
  font-weight: bold;
}

.cost .cost-label {
  font-size: 0.8em;
}

.chart-container {
  width: 100%;
  height: 100%;
  font-size: 10px; /* 基础字体大小 */
  /* padding: 10px; */
}

.pie-chart {
  width: 100%;
  height: 100%;
  min-height: 180px;
}

.warning-charts {
  display: flex;
  width: 100%;
  height: 100%;
}

.warning-chart {
  flex: 1;
  height: 100%;
}

</style>